<template>
  <div class="goods">
    <van-sticky>
      <van-nav-bar :title="$route.meta.title" left-arrow @click-left="onClickLeft" style="width:100%;" />
    </van-sticky>
    <van-tabs v-model="stateActive" @click="changetab" color="#1BB89C" style="height:100%;">
      <van-tab title="已上架" class="goods-list">
        <div class="goods-list-itema">
          <!-- 商品类型 -->
          <div class="goods-list-itema-type">
            <GoodsType :typelist='typelist' @info='getGoodsTypes' :sign='sign' />
          </div>
          <!-- 商品列表 -->
          <div class="goods-list-itema-info">
            <GoodsItem :goods="goodsList" :type='0' :signs="sign" @close="onClose" />
            <van-empty description="暂无数据" v-if="goodsList.length == 0" />
          </div>
        </div>
      </van-tab>
      <van-tab title="已下架" class="goods-list">
        <div class="goods-list-itema">
          <!-- 商品类型 -->
          <div class="goods-list-itema-type">
            <GoodsType :typelist='typelist' @info='getGoodsTypes' :sign='sign' />
          </div>
          <!-- 商品列表 -->
          <div class="goods-list-itema-info">
            <GoodsItem :goods="goodsList" :type='1' :signs="sign" @close="onClose" />
            <van-empty description="暂无数据" v-if="goodsList.length == 0" />
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <div class="goods-add">
      <van-popover v-model="showPopover1" trigger="click" placement="top-end" :actions="actions" @select="onSelect">
        <template #reference>
          <van-icon name="plus" size="0.6rem" color="#fff" />
        </template>
      </van-popover>
    </div>
  </div>
</template>

<script>
import GoodsType from "../goods/GoodsType";
import GoodsItem from "../goods/GoodsItem";
import { Toast } from "vant";
export default {
  name: "Goods",
  data () {
    return {
      id: '',
      utype: "",
      states: 1, // tab选项卡下标
      sign: 0, // 侧边栏下标
      is_lease: "",
      typeid: "",
      stateActive: 0,
      showPopover1: false,
      actions: [
        { text: "新建类型" },
        { text: "新建商品", disabled: false },
        { text: "编辑类型" },
      ],
      goodsList: {},
      navId: 0,
      value: 0,

      typelist: [],
    };
  },
  methods: {
    changetab (e) {
      this.stateActive = e
      this.states = e + 1
      if (this.typelist.length == 0) {
        var defone = {
          id: 0,
          type_name: "未分类",
        }
        this.typelist.unshift(defone)
      } else if (this.typelist[0].type_name != '未分类') {
        var def = {
          id: 0,
          type_name: "未分类",
        }
        this.typelist.unshift(def)
      }
      // else if (e == 0 && this.typelist[0].type_name == '未分类') {
      //   this.typelist.shift()
      // }
      this.getGoodsTypes(this.id, this.sign)
    },
    typelists (index, id) {
      this.$axios("/products/prodtypelist", {
        type: 1,
      })
        .then((res) => {
          this.typelist = res.data.data;
          var def = {
            id: 0,
            type_name: "未分类",
          }
          this.typelist.unshift(def)
          if (id == undefined) {
            this.getGoodsTypes(this.typelist[index].id)
          } else {
            this.getGoodsTypes(id)
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onClickLeft () {
      this.$router.push({ name: "controls" });
    },
    getUserInfo () {
      if (this.utype == 1) {
        this.actions[1].disabled = true;
      } else if (this.utype == 4 && this.is_lease == 2) {
        this.actions[1].disabled = true;
      }
    },
    getGoodsTypes (id, index) {
      if (index == undefined) {
        this.sign = 0
      } else {
        this.sign = index
      }
      if (id == '') {
        if (index == undefined) {
          id = 0
        } else {
          id = this.typelist[index].id
        }
      }
      this.$axios("/products/productslist", {
        type: 1, //区别：1-返回自己的商品类型，2-返回购买时总部/经销商的商品类型
        state: this.stateActive == 0 ? 1 : 2, //1-上架；2-下架
        prodtype: id, //商品类型
      })
        .then((res) => {
          if (res.data.code == 1) {
            // if (this.states == 2 && this.sign == 0) {
            if (id == 0) {
              this.goodsList = res.data.data.filter(v => {
                return v.type == null
              }).map(item => {
                return {
                  ...item,
                  images0: item.menuimage.split(',')
                }
              })
            } else {
              this.goodsList = res.data.data.map(item => {
                return {
                  ...item,
                  images0: item.menuimage.split(',')
                }
              })
            }
          } else {
            Toast.fail("加载失败\n请重试");
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    onClose () {
      this.getGoodsTypes();
    },
    onActives () {
      if (this.states == 1) {
        this.stateActive = 0
      } else {
        this.stateActive = 1
      }
    },
    // 气泡弹出框
    onSelect (action, index) {
      if (index == 0) {
        this.$router.push({ name: "addtype", });
      } else if (index == 1) {
        this.$router.push({ name: "addgoods" });
      } else if (index == 2) {
        this.$router.push({ name: "edittype", });
      }
    },
  },
  created () {
    // 获取加盟商身份，用于判断是否租赁设备
    this.is_lease = JSON.parse(localStorage.getItem("userInfo")).user.is_lease
    this.utype = JSON.parse(localStorage.getItem("userInfo")).user.utype
    if (this.$route.query.state == undefined) {
      this.states = 1
    } else {
      this.states = this.$route.query.state
    }
    if (this.$route.query.gtype == undefined) {
      this.sign = 0
    } else {
      this.sign = this.$route.query.gtype
    }
    this.typelists(this.sign);
    this.getUserInfo();
    this.onActives();
  },
  components: {
    GoodsItem,
    GoodsType,
  },
};
</script>
<style lang="less" scoped>
.goods {
  height: 100%;
  /deep/ .van-tab--active {
    color: #1bb89c;
    font-weight: bold;
  }
  &-list {
    display: flex;
    flex-direction: column;
    height: 100%;
    &-itema {
      display: flex;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #f6f6f6;
      &-type {
        width: 20%;
        height: 100%;
        background-color: #f6f6f6;
      }
      &-info {
        width: 80%;
        height: 100%;
        background-color: #fff;
      }
    }
  }
  &-add {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 50px;
    bottom: 100px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #1bb89c;
  }
  &-pops {
    display: flex;
    flex-direction: column;
    margin-top: 150px;
    &-num {
      padding: 50px 0;
      .goods-pops-btn {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 0 auto;
      }
      /deep/ .van-field__body {
        border-bottom: 1px solid #eee;
        text-align: center;
      }
    }
    &-btn {
      display: flex;
      justify-content: space-around;
      align-items: center;
      /deep/ .van-button {
        width: 30%;
        height: 60px;
        justify-content: center;
      }
    }
  }
}
</style>